#cmdQuit {
	pointer-events: all;	
}

#charactermenu {
    font-family: 'Dimbo';	
}

#explevel {
	font-family: 'GraphicPixel';
}

#expbar {
	font-family: 'GraphicPixel';
}

#playerbackground {
	background-color: none;
}

#shortcutbutton {
	position:absolute;
	right:0;
	bottom:2%;
	opacity:0.6;
}

#attackContainer {
	display: none;
}

@media screen and (min-width: 1501px) {

	#playerbar {
		position:absolute;
		left:0.4%;
		top:1%;
		width:20%;
		height:4%;
		z-index:10 !important;
		pointer-events: none;
		-moz-user-select: none;
	    -webkit-user-select: none;
	    cursor: none;
	    opacity:0.6;
	}
	
	#playerbar {
		border-radius: 3% / 10% !important;
	}
	#playerbar:before {
		border-radius: 3% / 10% !important;
	}
	
    #characterLook2 {
        position: absolute;
        left:25%;
        top:25%;
        width: 96px;
        height: 96px;
        margin-left:13%;
        margin-top:12%;
        z-index:20;
    }
    #characterLookArmor2, #characterLookWeapon2 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 480px;
        background-position: 0px -512px;
    }
    #charactermenu {
    	position:absolute;
        right:0;
        top:6%;
        text-align:center;
    	z-index:10;
    	cursor:pointer;
    	pointer-events:auto;
		opacity:0.75;
    }
    
	#statbars {
		position:absolute;
		top:10%;
		left:22%;
        height:42px;
        width:180px;
	}
	
	#statbars {
		width:180px;
		height:44px;
	}
	#statbars div.frame-border {
		display:block;
		width:180px;
		height:20px;
	}	
	#statbars div.frame-border:nth-child(1) {
		position: absolute;
		left:2px;
		top:2px;
	}
	#statbars div.frame-border:nth-child(2){
		position: absolute;
		left:2px;
		top:24px;
	}

    #health {
        position:absolute;
        top:0;
		left:0;
        height:20px;
        width:180px;
        z-index:5 !important;
		border: none;
    	border-right: 2px solid black;
    	background-image: url('../img/3/playerbar.png');
        background-position: -92px -106px;
        -webkit-transition: width .25s ease-in-out;
		transition: width .25s ease-in-out;
		
    }
    #fatigue {
    	position:absolute;
    	top:0;
		left:0;
        height:20px;
        width:180px;
        z-index:5 !important;
		border: none;
    	border-right: 2px solid black;
        background-image: url('../img/3/playerbar.png');
        background-position: -92px -129px;    	    
        -webkit-transition: width .25s ease-in-out;
		transition: width .25s ease-in-out;
    }

    #healthtext {
        position: absolute;
        top:0;
        left:0;
    	    
    }
    
    #fatiguetext {
        position: absolute;
        top:0;
        left:0;
    }
    
    #healthtext, #fatiguetext {
        width: 182px;
        height: 16px;
        border: 0px;
        margin: 0px;
        padding: 0px;
        line-height: 16px;
        text-align: center;
        color: white;
        font-size:16px;
        font-family: 'GraphicPixel', sans-serif;
        text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
        z-index:15;
    }

    #explevel {
        position: absolute;
        left: 0;
        top: 50%;
        width: 60px;
        height: 24px;
		text-align: center;
        color:yellow;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height:24px;
        font-size: 20px;
        text-align: center;
        z-index:30;
    }
    
    #expcontainer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 12px;
        background-color: black;
        margin-left: 0px;
        text-align: center;
        cursor: default;
        -moz-user-select: none;
        -webkit-user-select: none;
        border-top:3px solid black;
        opacity:0.75;
    }

    #exp {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 12px;
        width:0%;
        margin: 0px;
        padding: 0px;
        background-color: green;
        opacity:0.75;
        -webkit-transition: width .25s ease-in-out;
        transition: width .25s ease-in-out;
    }

    #expbar {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 14px;
        border: 0px;
        color:yellow;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height:14px;
        font-size: 12px;
        text-align: center;
    }
    

	#target {
		border-radius: 3% / 10% !important;
	}
	#target:before {
		border-radius: 3% / 10% !important;
	}

    #target{
        font-family:'GraphicPixel';
        color:#e3e3e3;
        position: absolute;
        top:1%;
        left:50%;
        display: none;
        pointer-events: none;
		width:120px;
		height:15px;
		opacity:0.75;
		padding:0;
    }
	
    #target .details {
        text-transform: capitalize;
        z-index:20;
    }
    #target .name {
        position: absolute;
        top:5%;
        left:5%;
        text-transform: capitalize;
        font-size:12px;
    }
    #target .health {
        position:absolute;
        left:5%;
        top:18px;
        height:12px;
		background-image: url('../img/3/targetbar.png');
		background-position: -89px -92px;
		width:120px;
        -webkit-transition: width .1s ease-in-out;
        transition: width .1s ease-in-out;
    }
    #target .level {
        position: absolute;
        bottom:5%;
        left:5%;
        z-index:20;
        font-size:12px;
    }

    #debugbar {
    	position: absolute;
    	top:0;
    	right:0;
    	width:100px;
    	height:100px;
    	font-family: 'GraphicPixel';
    	color: white;
    	font-size:18px;
    	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    	text-align:right;
    }    
}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {

	#playerbar {
		position:absolute;
		left:0.4%;
		top:1%;
		width:24%;
		height:8%;
		z-index:10 !important;
		pointer-events: none;
		-moz-user-select: none;
	    -webkit-user-select: none;
	    cursor: none;
	    opacity:0.6;
	}
	
	#playerbar {
		border-radius: 3% / 10% !important;
	}
	#playerbar:before {
		border-radius: 3% / 10% !important;
	}

    #characterLook2 {
        position: absolute;
        left:25%;
        top:25%;
        width: 96px;
        height: 96px;
        margin-left:13%;
        margin-top:12%;
        z-index:20;
    }
    #characterLookArmor2, #characterLookWeapon2 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 480px;
        background-position: 0px -512px;
    }
    #charactermenu {
    	position:absolute;
        right:0;
        top:6%;
        text-align:center;
    	z-index:10;
    	cursor:pointer;
    	pointer-events:auto;
		opacity:0.75;
    }
    
	#statbars {
		position:absolute;
		top:50%;
		left:60%;
		margin-top:-15px;
		margin-left:-60px;
		width:120px;
		height:28px;
	}
	#statbars div.frame-border {
		display:block;
		width:120px;
		height:14px;
	}	
	#statbars div.frame-border:nth-child(1) {
		position: absolute;
		left:1px;
		top:1px;
	}
	#statbars div.frame-border:nth-child(2){
		position: absolute;
		left:1px;
		top:16px;
	}
	
    #health {
        position:absolute;
        top:0;
		left:0;
        height:14px;
        width:120px;
        z-index:5 !important;
		border: none;
    	border-right: 2px solid black;
    	background-image: url('../img/3/playerbar.png');
        background-position: -92px -106px;
        -webkit-transition: width .25s ease-in-out;
		transition: width .25s ease-in-out;
		
    }
    #fatigue {
    	position:absolute;
    	top:0;
		left:0;
        height:14px;
        width:120px;
        z-index:5 !important;
		border: none;
    	border-right: 2px solid black;
        background-image: url('../img/3/playerbar.png');
        background-position: -92px -129px;    	    
        -webkit-transition: width .25s ease-in-out;
		transition: width .25s ease-in-out;
    }

    #healthtext {
        position: absolute;
        top:0;
        left:0;
    	    
    }
    
    #fatiguetext {
        position: absolute;
        top:0;
        left:0;
    }
    
    #healthtext, #fatiguetext {
        width: 122px;
        height: 16px;
        border: 0px;
        margin: 0px;
        padding: 0px;
        line-height:12px;
        text-align: center;
        color: white;
        font-size:12px;
        font-family: 'GraphicPixel', sans-serif;
        text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;
        z-index:15;
    }

    #explevel {
        position: absolute;
        left: 0;
        top: 50%;
        width: 60px;
        height: 24px;
		text-align: center;
        color:yellow;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height:24px;
        font-size: 20px;
        text-align: center;
        z-index:30;
    }
    
    #expcontainer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 12px;
        background-color: black;
        margin-left: 0px;
        text-align: center;
        cursor: default;
        -moz-user-select: none;
        -webkit-user-select: none;
        border-top:3px solid black;
        opacity:0.75;
    }

    #exp {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 12px;
        width:0%;
        margin: 0px;
        padding: 0px;
        background-color: green;
        opacity:0.75;
        -webkit-transition: width .25s ease-in-out;
        transition: width .25s ease-in-out;
    }

    #expbar {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 14px;
        border: 0px;
        color:yellow;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height:14px;
        font-size: 12px;
        text-align: center;
    }

	#target {
		border-radius: 3% / 10% !important;
	}
	#target:before {
		border-radius: 3% / 10% !important;
	}

    #target{
        font-family:'GraphicPixel';
        color:#e3e3e3;
        position: absolute;
        top:1%;
        left:50%;
        display: none;
        pointer-events: none;
		width:80px;
		height:10px;
		opacity:0.75;
		padding:0;
    }
	
    #target .details {
        text-transform: capitalize;
        z-index:20;
    }
    #target .name {
        position: absolute;
        top:5%;
        left:5%;
        text-transform: capitalize;
        font-size:8px;
    }
    #target .health {
        position:absolute;
        left:5%;
        top:12px;
        height:8px;
		background-image: url('../img/3/targetbar.png');
		background-position: -89px -92px;
		width:80px;
        -webkit-transition: width .1s ease-in-out;
        transition: width .1s ease-in-out;
    }
    #target .level {
        position: absolute;
        bottom:5%;
        left:5%;
        z-index:20;
        font-size:8px;
    }
    
    #debugbar {
    	position: absolute;
    	top:0;
    	right:0;
    	width:66px;
    	height:66px;
    	font-family: 'GraphicPixel';
    	color: white;
    	font-size:12px;
    	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    	text-align:right;
    }
    
}


@media screen and (max-width: 1000px) {

	#playerbar {
		position:absolute;
		left:0.2%;
		top:0.5%;
		width:20%;
		height:6%;
		z-index:10 !important;
		pointer-events: none;
		-moz-user-select: none;
	    -webkit-user-select: none;
	    cursor: none;
	    opacity:0.6;
	}
	
	#playerbar {
		border-radius: 3% / 10% !important;
	}
	#playerbar:before {
		border-radius: 3% / 10% !important;
	}

	#pboverlay {
		position:absolute;
		left:0;
		top:0;
		width:137px;
		height:50px;
		z-index:10 !important;		
	}
	
    #characterLook2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 48px;
        height: 48px;
        margin-left:10%;
        margin-top:10%;
        z-index:20;
        border-radius:50%;
    }
    #characterLookArmor2, #characterLookWeapon2 {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 240px;
        background-position: 0px -256px;
    }
    #charactermenu {
    	position:absolute;
        right:0;
        top:6%;
        text-align:center;
    	z-index:10;
    	cursor:pointer;
    	pointer-events:auto;
		opacity:0.75;
    }
    
	#statbars {
		position:absolute;
		top:40%;
		left:60%;
		margin-top:-8px;
		margin-left:-30px;
		width:60px;
		height:16px;
	}
	#statbars div.frame-border {
		display:block;
		width:60px;
		height:7px;
	}	
	#statbars div.frame-border:nth-child(1) {
		position: absolute;
		left:1px;
		top:1px;
	}
	#statbars div.frame-border:nth-child(2){
		position: absolute;
		left:1px;
		top:9px;
	}
	
    #health {
        position:absolute;
        top:0;
		left:0;
        height:7px;
        width:60px;
        z-index:5 !important;
		border: none;
        border-right: 1px solid black;
		background-color:#f00;
        -webkit-transition: width .25s ease-in-out;
		transition: width .25s ease-in-out;
		
    }
    #fatigue {
    	position:absolute;
    	top:0;
		left:0;
        height:7px;
        width:60px;
        z-index:5 !important;
		border: none;
    	border-right: 1px solid black;
		background-color:#00f;
        -webkit-transition: width .25s ease-in-out;
		transition: width .25s ease-in-out;
    }

    #healthtext {
        position: absolute;
        top:0;
        left:0;
    }
    
    #fatiguetext {
        position: absolute;
        top:0;
        left:0;
    }
    
    #healthtext, #fatiguetext {
        width: 60px;
        height: 8px;
        border: 0px;
        margin: 0px;
        padding: 0px;
        line-height: 7px;
        text-align: center;
        color: white;
        font-size:6px;
        font-family: 'GraphicPixel', sans-serif;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        z-index:15;
    }

    #explevel {
        position: absolute;
        left: 0;
        top: 25%;
        width: 20px;
        height: 12px;
		text-align: center;
        color:yellow;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height:12px;
        font-size: 10px;
        text-align: center;
        z-index:30;
    }
    
    #expcontainer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 6px;
        background-color: black;
        margin-left: 0px;
        text-align: center;
        cursor: default;
        -moz-user-select: none;
        -webkit-user-select: none;
        border-top:1px solid black;
        opacity:0.75;
    }

    #exp {
        position: absolute;
        bottom: 0px;
        left: 0px;
        height: 6px;
        width:0%;
        margin: 0px;
        padding: 0px;
        background-color: green;
        opacity:0.75;
        -webkit-transition: width .25s ease-in-out;
        transition: width .25s ease-in-out;
    }

    #expbar {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 7px;
        border: 0px;
        color:yellow;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        line-height:7px;
        font-size: 6px;
        text-align: center;
    }

	#target {
		border-radius: 3% / 10% !important;
	}
	#target:before {
		border-radius: 3% / 10% !important;
	}

    #target{
        font-family:'GraphicPixel';
        color:#e3e3e3;
        position: absolute;
        top:1%;
        left:50%;
        display: none;
        pointer-events: none;
		width:40px;
		height:5px;
		opacity:0.75;
		padding:0;
    }
	
    #target .details {
        text-transform: capitalize;
        z-index:20;
    }
    #target .name {
        position: absolute;
        top:5%;
        left:5%;
        text-transform: capitalize;
        font-size:4px;
    }
    #target .health {
        position:absolute;
        left:5%;
        top:6px;
        height:4px;
		background-image: url('../img/3/targetbar.png');
		background-position: -89px -92px;
		width:40px;
        -webkit-transition: width .1s ease-in-out;
        transition: width .1s ease-in-out;
    }
    #target .level {
        position: absolute;
        bottom:5%;
        left:5%;
        z-index:20;
        font-size:4px;
    }
    
    #debugbar {
    	position: absolute;
    	top:0;
    	right:0;
    	width:33px;
    	height:33px;
    	font-family: 'GraphicPixel';
    	color: white;
    	font-size:6px;
    	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    	text-align:right;
    }

}



